<template>
  <div
    :style="{
      padding: ruleFormLocal.styleType == 0 && ruleFormLocal.swiperControl.imageShadow == 1 ? '15px 0' : '0',
    }"
  >
    <!-- 轮播 -->
    <banner-swiper 
      :bannerList="dateFactory.imgList" 
      v-if="dateFactory.ruleForm.styleType == 0"
      :swiperControl="ruleFormLocal.swiperControl"
    ></banner-swiper>
    <!-- 滚动 -->
    <banner-scroll 
      :bannerList="dateFactory.imgList" 
      v-if="dateFactory.ruleForm.styleType == 1"
      :scrollControl="ruleFormLocal.scrollControl"
    ></banner-scroll>
    <!-- 图片模板 -->
    <option-right v-if="dateFactory.activeBorder">
      <div class="option-wrap">
        <el-form :model="ruleFormLocal"   label-width="100px">
          <div class="edit-componet-title">
            商品搜索
          </div>
          <el-form-item label="选择模板">
            <div class="templat">
              <div 
                :class="['template-style',  currentIndex == 0?'active' : '']" 
                @click="ruleFormLocal.styleType = 0,currentIndex=0"
              >
                <div class="select">
                  <el-image src="../assets/static/img/swiper.png"></el-image>
                </div>
                 <div class="h1">轮播海报</div>
              </div>
              <div 
                :class="['template-style',  currentIndex == 1?'active' : '']" 
                @click="ruleFormLocal.styleType = 1,currentIndex=1"
              >
                <div class="select">
                  <el-image src="../assets/static/img/three.png"></el-image>
                </div>
                 <div class="h1">大图横向滑动</div>
              </div>
            </div>
          </el-form-item>
          <!-- 轮播控制 -->
          <template v-if="ruleFormLocal.styleType == 0">
            <el-form-item label="轮播属性" prop="imageShadow">
              <el-radio-group v-model="ruleFormLocal.swiperControl.swiperStyle">
                <el-radio :label="0">普通轮播</el-radio>
                <el-radio :label="1">3d轮播</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="页面边距" prop="pagePadding">
              <div class="side">
                <el-slider 
                  v-model="ruleFormLocal.swiperControl.pagePadding"
                  :min="0" 
                  :max="30"
                ></el-slider>
                <span>{{ruleFormLocal.swiperControl.pagePadding}}像素</span>
              </div>
            </el-form-item>
            <el-form-item label="图片样式" prop="imageShadow">
              <el-radio-group v-model="ruleFormLocal.swiperControl.imageShadow">
                <el-radio :label="0">常规</el-radio>
                <el-radio :label="1">投影</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="图片倒角" prop="imageBorder" v-if="ruleFormLocal.swiperControl.swiperStyle != 1">
              <el-radio-group v-model="ruleFormLocal.swiperControl.imageBorder">
                <el-radio :label="0">直角</el-radio>
                <el-radio :label="1">圆角</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="指示器" prop="indicator">
              <el-radio-group v-model="ruleFormLocal.swiperControl.indicator" class="radios-wrap">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">样式2</el-radio>
                <el-radio :label="2">样式3</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
          <!-- 滑动控制 -->
           <template v-if="ruleFormLocal.styleType == 1">
            <el-form-item label="页面边距" prop="pagePadding">
              <div class="side">
                <el-slider 
                  v-model="ruleFormLocal.scrollControl.pagePadding"
                  :min="0" 
                  :max="30"
                ></el-slider>
                <span>{{ruleFormLocal.scrollControl.pagePadding}}像素</span>
              </div>
            </el-form-item>
            <el-form-item label="图片边距" prop="imgPadding">
              <div class="side">
                <el-slider 
                  v-model="ruleFormLocal.scrollControl.imgPadding"
                  :min="0" 
                  :max="30"
                ></el-slider>
                <span>{{ruleFormLocal.scrollControl.imgPadding}}像素</span>
              </div>
            </el-form-item>
            <el-form-item label="图片倒角" prop="imageBorder">
              <el-radio-group v-model="ruleFormLocal.scrollControl.imageBorder">
                <el-radio :label="0">直角</el-radio>
                <el-radio :label="1">圆角</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
          

        </el-form>
      </div>
    </option-right>

    
  </div>
</template>

<script>
// banner 轮播
import BannerSwiper from './BannerSwiper';
// banner scroll
import BannerScroll from './BannerScroll';

export default {
  name: 'BannerModule',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  data() {
    return {
      currentIndex: 0,
      ruleFormLocal:this.dateFactory.ruleForm,
    }
  },
  components: {
    BannerSwiper,
    BannerScroll
  },
   watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        this.diyData[this.index].ruleForm = newValue
        if (this.ruleFormLocal.page == 'AboutWe') {
           this.$EventBus.$emit('diyFactoryAboutMe', this.diyData)
        } else if (this.ruleFormLocal.page == 'CurriculumSchedule') {
            this.$EventBus.$emit('diyFactoryCurriShe', this.diyData)
        } else if (this.ruleFormLocal.page == 'Home') {
           this.$EventBus.$emit('diyFactory', this.diyData)
        }else if (this.ruleFormLocal.page == 'ArticleDetail') {
           this.$EventBus.$emit('diyFactoryArticleDetail', this.diyData)
        }else if (this.ruleFormLocal.page == 'MyPage') {
           this.$EventBus.$emit('diyFactoryMyPage', this.diyData)
        }
      },
      deep: true,
    }
  },
  mounted() {
    console.log(this.ruleFormLocal, 'ruleFormLocalruleFormLocal')
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        // 模板模块
        .templat {
          display: flex;
          align-items: center;
          .template-style {
              width: 100px;
              height: 100px;
              display: inline-block;
              border: 1px solid #e5e5e5;
              margin: 0 10px 15px 0;
              padding-top: 5px;
              background-color: #fff;
              text-align: center;
              cursor: pointer;
              &.active {
                border-color: #38f;
              }
              .select {
                width: 100px;
                height: 64px;
                .el-image {
                  width: 90px;
                  height: 60px;
                }
              }
              .h1 {
                height: 30px;
                line-height: 30px;
              }
            }

        }
       
        .border-wrap {
          display: flex;
          align-items: center;
          .el-color-picker {
            margin-right: 12px;
          }
        }
        .radios-wrap {
          .el-radio {
            // margin-top: 10px;
          }
        }
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
    

  }
</style>